<template>
    <div class="content">
        <u-sticky bgColor="#fff">
            <tab-list :list="tabList" :activeIndex="activeIndex" @change="onTabChange" />
        </u-sticky>
        <div class="record-list">
            <div class="record-item" v-for="item in orderList" :key="item.id">
                <div class="head">
                    <div class="left">
                        <img class="icon" src="@/static/images/common/shop.png" />
                        {{ item.studyhallName }}
                    </div>
                    <p class="status">{{ item.status | statusFilter }}</p>
                </div>
                <div class="order-info" v-for="spu in item.items" :key="spu.id">
                    <div class="left"></div>
                    <u--image
                        :src="spu.picUrl"
                        width="180rpx"
                        height="180rpx"
                        :lazy-load="true"
                        mode="aspectFill"
                        radius="8rpx"
                        @click="showPreview(spu.picUrl)"
                    ></u--image>
                    <div class="right" @click="toDetail(item.id)">
                        <div class="name">{{ spu.spuName }}</div>
                        <p class="time">下单时间：{{ formatTime(item.createTime) }}</p>
                        <p class="num">×{{ spu.count }}</p>
                        <div class="price">
                            实付款<span class="unit">¥</span
                            ><span class="money">{{ spu.payPrice | formatMoney(2) }}</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="empty" v-if="empty">
            <img class="image" src="@/static/images/common/empty.png" />
            <p class="name">您当前没有订单</p>
        </div>
        <u-loadmore
            v-if="orderList.length > 0"
            loadmoreText="找自习 来上岸"
            fontSize="24rpx"
            color="#D5D5D5"
            lineColor="#D5D5D5"
            marginTop="20"
            line
        />
    </div>
</template>

<script>
import dayjs from 'dayjs';
import TabList from '@/components/TabList';
export default {
    name: 'order-record',
    components: {
        TabList,
    },
    data() {
        return {
            activeIndex: 0,
            tabList: [
                { name: '全部', status: null },
                { name: '已支付', status: 30 },
                { name: '已退款', status: 40 },
            ],
            params: {
                pageNo: 1,
                pageSize: 20,
                categoryType: 1,
            },
            orderList: [],
            total: 0,
            empty: false,
            finish: false,
        };
    },
    onLoad() {
        this.refreshList();
    },
    onPullDownRefresh() {
        this.refreshList();
    },
    onReachBottom() {
        this.refreshList(true);
    },
    methods: {
        onTabChange(index) {
            this.activeIndex = index;
            if (index === 0) {
                delete this.params.status;
            } else {
                this.params.status = this.tabList[index].status;
            }
            this.refreshList();
        },
        formatTime(val) {
            return dayjs(val).format('YYYY-MM-DD HH:mm:ss');
        },
        getOrderList(load) {
            if (this.orderList < this.total || (!this.empty && !this.finish)) {
                this.$Api.trade.order
                    .page({
                        ...this.params,
                    })
                    .then(res => {
                        if (!load) {
                            this.orderList = res.list;
                        } else {
                            this.orderList = this.orderList.concat(res.list);
                        }
                        this.params.pageNo++;
                        this.total = res.total;
                        if (res.total === 0) {
                            this.empty = true;
                        }
                        if (this.orderList.length === res.total) {
                            this.finish = true;
                        }
                        uni.stopPullDownRefresh();
                    });
            }
        },
        refreshList(load) {
            if (!load) {
                this.orderList = [];
                this.total = 0;
                this.empty = false;
                this.finish = false;
                this.params.pageNo = 1;
            }
            this.getOrderList();
        },
        toDetail(id) {
            uni.navigateTo({
                url: '/pages/my/order-detail?id=' + id,
            });
        },
        showPreview(url) {
            uni.previewImage({
                urls: [url],
            });
        },
    },
    filters: {
        statusFilter(val) {
            switch (val) {
                case 30:
                    return '已支付';
                case 40:
                    return '已退款';
            }
        },
    },
};
</script>

<style lang="scss" scoped>
.content {
    .record-list {
        padding: 0 30rpx;
        .record-item {
            padding: 20rpx 32rpx;
            background: #fff;
            border-radius: 24rpx;
            margin-top: 20rpx;
            .head {
                padding-bottom: 12rpx;
                border-bottom: 1rpx solid #e5e5e5;
                @include flexBox(space-between, center);
                .left {
                    font-size: 24rpx;
                    font-weight: 600;
                    color: #2f2f2f;
                    @include flexBox(flex-start, center);
                    .icon {
                        width: 48rpx;
                        height: 48rpx;
                        margin-right: 10rpx;
                    }
                }
                .status {
                    font-size: 24rpx;
                    font-weight: 600;
                    color: #fa6400;
                }
            }
            .order-info {
                margin-top: 18rpx;
                @include flexBox(space-between);
                .right {
                    flex: 1;
                    height: 180rpx;
                    margin-left: 24rpx;
                    overflow: hidden;
                    position: relative;
                    @include flexBox(space-between, flex-start, column);
                    .name {
                        width: 86%;
                        font-size: 28rpx;
                        font-weight: 600;
                        color: #2f2f2f;
                        @include ellipsis(1);
                    }
                    .time {
                        font-size: 24rpx;
                        color: #898989;
                        margin-top: -40rpx;
                    }
                    .num {
                        position: absolute;
                        right: 0;
                        top: 0;
                        font-size: 28rpx;
                        color: #898989;
                    }
                    .price {
                        width: 100%;
                        font-size: 24rpx;
                        color: #2f2f2f;
                        @include flexBox(flex-end, center);
                        .unit {
                            margin-left: 10rpx;
                            font-size: 28rpx;
                            font-weight: 600;
                            color: #2f2f2f;
                        }
                        .money {
                            font-size: 36rpx;
                            font-weight: 600;
                            color: #2f2f2f;
                        }
                    }
                }
            }
        }
    }
}
</style>
